<template>
  <div>
    <div class="text-container">
      <!-- <img src="../assets/logo.png" class="img-logo" _v-650b1118=""> -->
      <div style=" font-weight: 100;font-size: 36px;">XCore</div>
      <h5>一套基于.Net Core 底层开源架构</h5>
      <div class="nav">
        <span @click="handleGo('http://admin.lbanyun.com')">开始体验</span>
        &nbsp; &nbsp;
        <span @click="handleRegister">授权</span>
        &nbsp; &nbsp;
        <span @click="hanadleAlert('即将开源 敬请等待...')">Git</span>
        &nbsp; &nbsp;
        <span @click="hanadleAlert('页面开发中 敬请等待...')">介绍</span>
      </div>
    </div>

    <el-dialog
      title="获取站点"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :fullscreen="dialogFullscreen"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        label-position="top"
      >
        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input type="text" v-model="ruleForm.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input type="text" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"   style="width:100%" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="app-container">
      <pointwave :color="0x097bdb" />
    </div>
  </div>
</template>

<script>
import Pointwave from "@/components/Pointwave";
import { validPhoneNumber } from "@/utils/validate";
import { isMobile } from "@/utils";
import { authoriza } from "@/api/account";
export default {
  name: "HelloWorld",
  components: {
    Pointwave
  },
  data() {
    var validatePhone = (rule, value, callback) => {
      if (!value) callback(new Error("手机号码不能为空"));
      else if (!validPhoneNumber(value))
        callback(new Error("请输入正确的手机号码"));
      else callback();
    };
    var validateName = (rule, value, callback) => {
      if (!value) callback(new Error("姓名不能为空"));
      else if (value.length > 16)
        callback(new Error("姓名长度不能大于16位字符"));
      else callback();
    };
    return {
      dialogVisible: false,
      dialogFullscreen: false,
      ruleForm: {
        phoneNumber: "",
        name: ""
      },
      rules: {
        phoneNumber: [
          { required: true, validator: validatePhone, trigger: "blur" }
        ],
        name: [{ required: true, validator: validateName, trigger: "blur" }]
      }
    };
  },
  created() {
    this.dialogFullscreen = isMobile();
  },
  methods: {
    handleRegister() {
      this.dialogVisible = true;
    },
    handleGo(url) {
      open(url);
    },
    hanadleAlert(text){
      this.$message({
        message:text,
        type:"success"
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const loading = this.$loading({ text: "正在授权" });
          authoriza(this.ruleForm)
            .then(response => {
              loading.close();
              if (response.success) this.dialogVisible = false;
              this.$notify({
                title: response.message ? "授权成功" : "授权失败",
                dangerouslyUseHTMLString: true,
                message: response.message,
                type: response.message ? "success" : "error",
                duration: 0
              });
            })
            .catch(error => {
              loading.close();
              console.error(error);
            });
        } else {
          this.$message.error("请完善表单信息");
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h5 {
  color: #fff;
  font-weight: 400;
  margin-top: 50px;
  font-size: 16px;
}
.nav span {
  cursor: pointer;
  font-size: 16px;
  letter-spacing: 2px;
  color: #0099fb;
}
.nav span:hover {
  color: #fff;
  border-bottom: 1px solid #fff;
}
.app-container {
  background: url("../assets/background.png");
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  z-index: -10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
.text-container {
  width: 300px;
  height: 300px;
  padding-top: 300px;
  text-align: center;
  margin: 0 auto;
}
h5 {
  letter-spacing: 2px;
}
.el-notification{
  width: 390px !important;
}
</style>
